<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像处理AI助手</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
<!--        <header>-->
<!--            <h1>🖼️ 图像处理AI助手</h1>-->
<!--        </header>-->

        <div class="main-content">
            <!-- 左侧：图像上传和处理 -->
            <div class="image-section">
                <h2>图像上传与处理</h2>
                
                                <!-- 修改图像上传区域 -->
                <!-- 修改上传区域 -->
                <div class="upload-area">
                    <div class="upload-box">
                        <h3>上传图像</h3>
                        <div class="image-previews" id="image-previews">
                            <span>未上传图像</span>
                        </div>
                        <input type="file" id="image-upload" accept="image/*" multiple style="display: none;">
                        <div style="display: flex; gap: 10px; margin-top: 10px;">
                            <button type="button" onclick="document.getElementById('image-upload').click()">
                                上传图像（可多选）
                            </button>
                            <button type="button" id="clear-images-btn" style="background-color: #ff4d4f;">
                                清空所有图像
                            </button>
                        </div>
                        <div id="image-count" style="margin-top: 5px; font-size: 12px; color: #666;">
                            当前已上传: 0 张图像
                        </div>
                    </div>
                </div>
                
                <!-- 修改结果区域 -->
                <div class="result-area">
                    <h3 id="result-title">处理结果</h3>
                    <div class="image-preview" id="result-preview">
                        <span>等待处理结果</span>
                    </div>
                    <button type="button" id="download-btn" style="display: none;">下载结果</button>
                </div>

                <div class="quick-actions">
                    <button type="button" id="clear-btn">🗑️ 清空对话</button>
                </div>
            </div>

            <!-- 右侧：对话界面 -->
            <div class="chat-section">
                <h2>与AI助手对话</h2>
                
                <div class="chat-history" id="chat-history">
                    <!-- 对话历史将在这里显示 -->
                            <!-- 添加AI思考中的指示器 -->
                <div id="ai-thinking" style="display: none;" class="chat-message assistant">
                    <div class="message-header">
                        <span>🤖 AI助手</span>
                        <span class="message-time">思考中...</span>
                    </div>
                    <div class="message-content">
                        <div class="thinking-dots">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
                </div>

                <div class="chat-input">
                    <input type="text" id="message-input" placeholder="输入您的消息...">
                    <button type="button" id="send-btn">发送</button>
                </div>

            </div>
        </div>
    </div>


    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>